<template>
  <div class="updateService">
    <div class="title">
      <span>{{ title }}</span>
      <Icon type="md-close" style="float:right;cursor:pointer" @click="close" />
    </div>
    <Divider class="fengeLine" />
    <div v-if="hasButton">
      <Button style="float:right; margin: 7px 10px 0 0;" @click="startEdit"
        >编辑</Button
      >
    </div>
    <div class="toggle">
      <div class="contain" style="margin:0 auto;">
        <div
          style="margin-right: 23px; cursor: pointer;"
          @click="changePage(1)"
        >
          1
        </div>
        <img
          src="../../assets/fwgl/箭头服务注册.png"
          style="vertical-align:middle;"
        />
        <div style="margin-left: 23px; cursor: pointer;" @click="changePage(2)">
          2
        </div>
      </div>
    </div>
    <div class="mainContent">
      <div class="left">
        <Form
          :model="serviceForm"
          :disabled="!isEdit"
          :rules="ruleBaseMsg"
          :label-width="80"
          v-show="showPage1"
        >
          <FormItem label="服务URL" prop="url">
            <Input
              v-model="serviceForm.url"
              placeholder="请输入服务URL"
            ></Input>
          </FormItem>
          <FormItem label="服务名称" prop="title">
            <Input
              v-model="serviceForm.title"
              placeholder="请输入服务名称"
            ></Input>
          </FormItem>
          <FormItem label="服务简介" prop="desc">
            <Input
              v-model="serviceForm.desc"
              placeholder="请输入服务简介"
            ></Input>
          </FormItem>
          <FormItem label="关键字" prop="keywords">
            <Input
              v-model="keywords"
              placeholder="请输入关键字"
              @on-blur="getKeywords"
            ></Input>
          </FormItem>
          <FormItem label="服务类型" prop="type">
            <Select v-model="serviceForm.type">
              <Option
                v-for="(value, index) in serviceType"
                :key="index"
                :value="value"
                >{{ value }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="主题分类" prop="themeClass">
            <Select v-model="serviceForm.themeClass">
              <Option
                v-for="(value, index) in serviceThemeClass"
                :key="index"
                :value="value"
                >{{ value }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="坐标系" prop="coordinate">
            <Input
              v-model="serviceForm.coordinate"
              placeholder="请输入坐标系"
            ></Input>
          </FormItem>
          <FormItem label="投影类型" prop="projection">
            <Input
              v-model="serviceForm.projection"
              placeholder="请输入投影类型"
            ></Input>
          </FormItem>
          <FormItem label="发布时间" prop="publishDate">
            <!-- <Input
              v-model="serviceForm.publishDate"
              placeholder="请输入发布时间"
            ></Input> -->
            <DatePicker
              type="date"
              placeholder="请输入发布时间"
              v-model="serviceForm.publishDate"
            ></DatePicker>
          </FormItem>
          <FormItem label="上次更新时间" prop="lastUpdateDate">
            <!-- <Input
              v-model="serviceForm.lastUpdateDate"
              placeholder="请输入上次更新时间"
            ></Input> -->
            <DatePicker
              type="date"
              placeholder="请输入上次更新时间"
              v-model="serviceForm.lastUpdateDate"
            ></DatePicker>
          </FormItem>
        </Form>
        <Form
          :model="serviceForm"
          :disabled="!isEdit"
          v-show="showPage2"
          :label-width="80"
        >
          <FormItem label="发布机构" prop="organization">
            <Input
              v-model="serviceForm.publishInfo.organization"
              placeholder="请输入发布机构"
            ></Input>
          </FormItem>
          <FormItem label="地址" prop="address">
            <Input
              v-model="serviceForm.publishInfo.address"
              placeholder="请输入地址"
            ></Input>
          </FormItem>
          <FormItem label="网站" prop="website">
            <Input
              v-model="serviceForm.publishInfo.website"
              placeholder="请输入网站"
            ></Input>
          </FormItem>
          <FormItem label="联系人" prop="person">
            <Input
              v-model="serviceForm.contactInfo.person"
              placeholder="请输入联系人"
            ></Input>
          </FormItem>
          <FormItem label="联系人电话" prop="phone">
            <Input
              v-model="serviceForm.contactInfo.phone"
              placeholder="请输入联系人电话"
            ></Input>
          </FormItem>
          <FormItem label="联系人邮箱" prop="mail">
            <Input
              v-model="serviceForm.contactInfo.mail"
              placeholder="请输入联系人邮箱"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <div class="right">
        <Form
          :model="formBaseMsg_right"
          :disabled="!isEdit"
          :rules="ruleBaseMsg_right"
          :label-width="80"
          v-show="showPage1"
        >
          <FormItem label="更新周期" prop="updateCycle">
            <Input
              v-model="serviceForm.updateCycle"
              placeholder="请输入更新周期"
            ></Input>
          </FormItem>
          <FormItem label="服务范围" prop="extentInfo">
            <div style="margin-bottom:7px">
              <label>左上角经度</label>
              <Input
                v-model="serviceForm.extentInfo.topLeftLon"
                placeholder="请输入左上角经度"
                style="width:160px;float: right"
              ></Input>
            </div>
            <div style="margin-bottom:7px">
              <label>左上角纬度</label>
              <Input
                v-model="serviceForm.extentInfo.topLeftLat"
                placeholder="请输入左上角纬度"
                style="width:160px;float: right"
              ></Input>
            </div>
            <div style="margin-bottom:7px">
              <label>右下角经度</label>
              <Input
                v-model="serviceForm.extentInfo.bottomRightLon"
                placeholder="请输入右下角经度"
                style="width:160px;float: right"
              ></Input>
            </div>
            <div style="margin-bottom:7px">
              <label>右下角纬度</label>
              <Input
                v-model="serviceForm.extentInfo.bottomRightLat"
                placeholder="请输入右下角纬度"
                style="width:160px;float: right"
              ></Input>
            </div>
          </FormItem>
          <FormItem label="预览图" prop="thumb">
            <Row>
              <Col>
                <Input class="display-none" v-model="serviceForm.thumb"></Input>
                <img
                  v-if="serviceForm.thumb"
                  :src="serviceForm.thumb"
                  class="avatar"
                />
                <!-- <Icon v-else type="md-add" /> -->
                <!-- <i v-else class="img-border el-icon-plus avatar-uploader-icon"></i> -->
                <div v-else class="avatar-uploader-icon"></div>
                <div class="up-file">
                  <form ref="idCardFaceForm">
                    <input
                      accept="image/*"
                      name="upimage"
                      ref="uploadFile2"
                      type="file"
                      @change="idCardFacebase64"
                      :disabled="!isEdit"
                    />上传缩略图
                  </form>
                </div>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </div>
    </div>
    <div class="button">
      <Button @click="submit">完成</Button>
    </div>
  </div>
</template>
<script>
export default {
  name: "UpdateService",
  data() {
    return {
      isEdit: this.title == "注册服务" ? true : false,
      formBaseMsg: {},
      formContactMsg: {},
      ruleBaseMsg: {
        url: [{ required: true, message: "服务URL不能为空", trigger: "blur" }],
        title: [
          { required: true, message: "服务名称不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "服务类型不能为空", trigger: "change" }
        ],
        themeClass: [
          { required: true, message: "主题分类不能为空", trigger: "change" }
        ]
      },
      ruleBaseMsg_right: {},
      serviceType: [],
      serviceTypeResult: [],
      serviceThemeClass: [],
      serviceThemeClassResult: [],
      keywords: "",
      formBaseMsg_right: {},
      showPage1: true,
      showPage2: false
    };
  },
  props: ["title", "hasButton", "serviceForm"],
  mounted() {
    this.keywords = this.serviceForm.keywords.join("、");
    this.getTypeAndClass();
  },
  methods: {
    close() {
      this.$emit("operState", false);
    },
    getTypeAndClass() {
      this.axios.get("/type").then(res => {
        if (res.data.code == 200) {
          if (res.data.data.length > 0) {
            res.data.data.forEach(item => {
              this.serviceType.push(item.type);
              this.serviceTypeResult.push(item);
            });
          } else {
            this.$Message.info("当前没有服务类型！");
          }
        } else {
          this.$Message.info("检索服务类型失败！");
        }
      });
      this.axios.get("class").then(res => {
        if (res.data.code == 200) {
          if (res.data.data.length > 0) {
            res.data.data.forEach(item => {
              this.serviceThemeClass.push(item.themeClass);
              this.serviceThemeClassResult.push(item);
            });
          } else {
            this.$Message.info("当前没有主题分类");
          }
        } else {
          this.$Message.info("检索主题分类失败！");
        }
      });
    },
    getKeywords(e) {
      this.serviceForm.keywords = e.target.value.split("、");
    },
    idCardFacebase64() {
      var that = this;
      var file = this.$refs.uploadFile2.files[0];
      if (file.size > 100 * 1024) {
        this.$Message.info("上传图片不能大于100kb！");
        return;
      } else {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function() {
          that.serviceForm.thumb = reader.result;
        };
      }
    },
    submit() {
      let tempType, tempThemeClass;
      let submitData = {};
      this.serviceTypeResult.forEach(item => {
        if (item.type == this.serviceForm.type) {
          tempType = item.id;
        }
      });
      this.serviceThemeClassResult.forEach(item => {
        if (item.themeClass == this.serviceForm.themeClass) {
          tempThemeClass = item.id;
        }
      });
      for (let k in this.serviceForm) {
        if (k == "type") {
          submitData[k] = tempType;
        } else if (k == "id") {
          continue;
        } else if (k == "themeClass") {
          submitData[k] = tempThemeClass;
        } else {
          submitData[k] = this.serviceForm[k];
        }
      }
      if (this.title == "注册服务") {
        this.axios.post("/service", submitData).then(res => {
          if (res.data.code == 200) {
            this.$Message.info("注册成功！");
            this.$emit("operState", false);
          } else {
            this.$Message.info("注册失败！");
          }
        });
      } else {
        this.axios
          .put("/service/" + this.serviceForm.id, submitData)
          .then(res => {
            if (res.data.code == 200) {
              this.$Message.info("更新成功！");
              this.$emit("operState", false);
            } else {
              this.$Message.info("更新失败！");
            }
          });
      }
    },
    startEdit() {
      this.isEdit = true;
    },
    changePage(index) {
      this.showPage1 = index == 1 ? true : false;
      this.showPage2 = index == 2 ? true : false;
    }
  }
};
</script>
<style scoped>
.updateService {
  position: fixed;
  width: 820px;
  height: 650px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 1);
  z-index: 999;
}
.title {
  height: 40px;
  padding: 10px;
}
.fengeLine {
  margin: 0;
}
.mainContent {
  height: 510px;
  padding: 10px;
}
.mainContent .left {
  width: 450px;
  height: 480px;
  padding: 8px 38px;
  float: left;
  border-radius: 8px;
}
.mainContent .right {
  width: 350px;
  height: 480px;
  padding: 8px;
  float: right;
}
.button {
  height: 60px;
  padding: 10px;
}
.button button {
  float: right;
}
.toggle {
  text-align: center;
  margin-top: 7px;
}
.toggle > .contain > div {
  border: 1px solid rgba(209, 208, 208, 1);
  width: 37px;
  height: 37px;
  background-color: rgba(246, 248, 250, 1);
  border-radius: 50%;
  text-align: center;
  line-height: 33px;
  display: inline-block;
}
.updateService /deep/ .ivu-form-item {
  margin-bottom: 15px;
}
/*缩略图相关 */
.display-none {
  display: none;
}
.up-file {
  margin: 0 auto;
  padding: 4px 10px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  color: black;
  border-radius: 4px;
  overflow: hidden;
  width: 90px;
}
/*input type=file 时鼠标悬停变手*/
input[type="file"] {
  width: 90px;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
  font-size: 0;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  max-width: 500px;
  min-width: 250px;
  height: 200px;
  line-height: 200px !important;
  text-align: center;
  float: left;
  position: relative;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 100%;
  height: 150px;
  display: block;
}
</style>
